<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>p48_引出生命周期</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 
		vm的一生(vm的生命周期):
			将要创建 ===> 调用beforeCreate函数。
			创建完毕 ==> 调用created函数。
			将要挂载 ===> 调用beforeMount函数。 (重要)
			挂载完毕 ===>调用mounted函数。 >[重要的钩子]
			将要更新 ===> 调用beforeUpdate函数。 
			更新完毕 ===>调用updated函数。 (重要)
			将要销毁 ===>调用beforeDestroy函数。========>[重要的钩子]
			销毁完毕 ===> 调用destroyed函数。
		 -->
		 
		 <!-- 
			常用的生命周期钩子:
				1.mounted、发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作]。
				2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作]。
				
			关于销毁Vue实例
				1.销毁后借助Vue开发者工具看不到任何信息。
				2.销毁后自定义事件会失效，但原生DOM事件依然有效。
				3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
		 -->
	</head>
	<body>
		<div id="root">
			<!-- 这一句代码能不能看出这是什么？
				动态绑定需要写个冒号,如:style
				里面一组一组的需要写成对象。
				前一个opacity是style里面的透明的，后一个是它的值。
				因为key-value相同，可以简写为：:style="{opacity}"
				:style="{opacity:opacity}
			-->
			<h1 :style="{opacity}">欢迎学习Vue</h1>
			<button @click="stop()">点我停止变换</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					opacity: 1,
					change10: true
				},
				methods:{
					stop(){
						//clearInterval(this.timer);//停止定时器；
						vm.$destroy()//销毁vm；
					}
				},
				mounted() {
				//mounted是不是 属于生命周期；里面的this是谁？vm，
				//这一句是我往vm timer属性上存一个定时器；((timer是我们添加的属性)
				this.timer = setInterval(() => {
						//为什么这里可以用this，因为setInterval用的是箭头函数,箭头函数的this往外找。
						console.log("seetInterval");
						if (this.change10) { 
							vm.opacity = vm.opacity - 0.001;
							if (vm.opacity <= 0) {
								this.change10 = !this.change10
							}
						} else {
							vm.opacity = vm.opacity + 0.001;
							if (vm.opacity >= 1) {
								this.change10 = !this.change10
							}
						}
					}, 2)
				},
				beforeDestroy(){
					//销毁前，清除定时器
					clearInterval(this.timer)
				}
			})

			//通过外部的定时器实现(不推荐)
			/* setInterval(() => {
				vm.opacity = vm.opacity - 0.001;
				if (vm.opacity <= 0) vm.opacity = 1;
			}, 2) 
			*/
		</script>
	</body>
</html>